import React from 'react';
import { connect } from 'dva';
import queryString from 'query-string';
import router from 'umi/router';
import moment from 'moment';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Tabs } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import { formatNumber } from '@/utils/utils';
import styles from '@/utils/utils.less';
import BillDetails from './BillDetail'; // 账单明细

const { Description } = DescriptionList;
const { TabPane } = Tabs;

@connect(({ loading, customerbilling }) => ({
  loading: loading.models.customerbilling,
  detailDataInfo: customerbilling.detailDataInfo, // 详情信息
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  state = {
    billId: '',
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { billId } = queryString.parse(location.search);
    this.setState({
      billId,
    });
    dispatch({
      type: 'customerbilling/detailData',
      payload: { billId },
    });
    // 获取列表数据
    dispatch({
      type: 'customerbilling/updateModelData',
      payload: {
        billDetailDataInfo: {
          list: [],
          pagination: {
            current: 1,
            pageSize: 10,
            total: 10,
          },
        },
      },
    });
  }

  // 返回
  closeDetail = () => {
    router.goBack();
  };

  render() {
    const { billId } = this.state;
    const { detailDataInfo } = this.props;
    const onBillAmo = parameter => {
      if (parameter.billAmo) {
        return formatNumber(`${parameter.billAmo}`);
      }
      if (parameter.billAmo === 0) {
        return 0;
      }
      return '--';
    };
    return (
      <PageHeaderWrapper>
        <Card style={{ marginBottom: 24 }} bordered={false} className={styles.tabCard}>
          <Tabs defaultActiveKey="1">
            <TabPane tab="账单信息" key="1">
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="客户名称">{detailDataInfo.custName || '--'}</Description>
                <Description term="商务合同">{detailDataInfo.contName || '--'}</Description>
                <Description term="服务类型">{detailDataInfo.serTypeName || '--'}</Description>
                <Description term="成本中心">{detailDataInfo.costCenterName || '--'}</Description>
                <Description term="涉及人数">
                  {detailDataInfo.involvePersonNum === 0
                    ? `${detailDataInfo.involvePersonNum}`
                    : detailDataInfo.involvePersonNum}
                </Description>
                <Description term="账单状态">{detailDataInfo.billStateName || '--'}</Description>
                <Description term="账单年月">
                  {detailDataInfo.billYm
                    ? `${`${detailDataInfo.billYm}`.substring(0, 4)}-${`${
                        detailDataInfo.billYm
                      }`.substring(4)}`
                    : '--'}
                </Description>
                <Description term="账单金额">{onBillAmo(detailDataInfo)}</Description>
                <Description term="服务费">
                  {detailDataInfo.othCost === 0
                    ? `${detailDataInfo.othCost}`
                    : formatNumber(detailDataInfo.othCost) || '--'}
                </Description>
                <Description term="福利费">
                  {detailDataInfo.bnftAmo === 0
                    ? `${detailDataInfo.bnftAmo}`
                    : formatNumber(detailDataInfo.bnftAmo) || '--'}
                </Description>
                <Description term="体检费">
                  {detailDataInfo.medExamAmo === 0
                    ? `${detailDataInfo.medExamAmo}`
                    : formatNumber(detailDataInfo.medExamAmo) || '--'}
                </Description>
                <Description term="保险费用">
                  {detailDataInfo.cmpinsAmo === 0
                    ? `${detailDataInfo.cmpinsAmo}`
                    : formatNumber(detailDataInfo.cmpinsAmo) || '--'}
                </Description>
                <Description term="风险金">
                  {detailDataInfo.riskAmo === 0
                    ? `${detailDataInfo.riskAmo}`
                    : formatNumber(detailDataInfo.riskAmo) || '--'}
                </Description>
                <Description term="增值税">
                  {detailDataInfo.vatTaxAmo === 0
                    ? `${detailDataInfo.vatTaxAmo}`
                    : formatNumber(detailDataInfo.vatTaxAmo) || '--'}
                </Description>
                <Description term="代收社保">
                  {detailDataInfo.agtsrvIns === 0
                    ? `${detailDataInfo.agtsrvIns}`
                    : formatNumber(detailDataInfo.agtsrvIns) || '--'}
                </Description>
                <Description term="代收公积金">
                  {detailDataInfo.agtsrvAccu === 0
                    ? `${detailDataInfo.agtsrvAccu}`
                    : formatNumber(detailDataInfo.agtsrvAccu) || '--'}
                </Description>
                <Description term="代收工资">
                  {detailDataInfo.agtsrvWage === 0
                    ? `${detailDataInfo.agtsrvWage}`
                    : formatNumber(detailDataInfo.agtsrvWage) || '--'}
                </Description>
                <Description term="个人所得税">
                  {detailDataInfo.taxblAmo === 0
                    ? `${detailDataInfo.taxblAmo}`
                    : formatNumber(detailDataInfo.taxblAmo) || '--'}
                </Description>
                <Description term="账单生成时间">
                  {(detailDataInfo &&
                    detailDataInfo.creTime &&
                    moment(detailDataInfo.creTime).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
                <Description term="收费截止日期">
                  {detailDataInfo.lastFeeDate
                    ? moment(detailDataInfo.lastFeeDate).format('YYYY-MM-DD')
                    : '--'}
                </Description>
                <Description term="申请发票类型">{detailDataInfo.invTypeName || '--'}</Description>
                <Description term="确认收费时间">
                  {(detailDataInfo &&
                    detailDataInfo.chrgTime &&
                    moment(detailDataInfo.chrgTime).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
                <Description term="确认收费人员">{detailDataInfo.chrgName || '--'}</Description>
              </DescriptionList>
            </TabPane>
            <TabPane tab="账单明细" key="2">
              <BillDetails comment={billId} />
            </TabPane>
          </Tabs>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.closeDetail}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default ClientInfoDetails;
